<template>
	<view>
		<view class="container">
			<!-- #ifndef MP -->
			<view class="header">
				<image src="/static/mine_head_icon_1.png" mode="" @click="go('ucenter/setting_mp')"></image>
				<!-- <image src="/static/mine_head_icon_2.png" mode="" @click="go('ucenter/help')"></image> -->
			</view>
			<!-- #endif -->
			<view class="userinfo" :style="{paddingTop:statusH+'px'}">
				<view class="user_left">
					<image :src="avatar" mode=""></image>
					<view class="info_text">
						<view class="name">{{username}}</view>
						<view class="city">{{city}}<text class="user_level">{{user_level}}</text></view>
						
					</view>
				</view>
				<!-- #ifdef MP -->
				<view class="user_qd">
					<image src="/static/mine_head_icon_1.png" style="width: 30rpx;float: right;height: 30rpx;" mode="" @click="go('ucenter/setting')"></image>
				</view>
				<!-- #endif -->
				<!-- <view class="user_qd">
					<image class="qd_img" src="/static/mine_qd.png" mode=""></image>
					<view class="qd_box">签到领奖</view>
				</view> -->
			</view>
			<view class="data_list">
				<view class="data_item">
					<image class="item_img" :src="mine_h_bg" mode=""></image>
					<view class="item_box">
						<view class="data_num">0</view>
						<view class="data_text">申请免押金</view>
					</view>
				</view>
				<view class="data_item" @click="go('ucenter/coupon')">
					<image class="item_img" :src="mine_h_bg" mode=""></image>
					<view class="item_box">
						<view class="data_num">{{coupon||0}}</view>
						<view class="data_text">优惠卷</view>
					</view>
				</view>
				<view class="data_item" @click="go('ucenter/collect')">
					<image class="item_img" :src="mine_h_bg" mode=""></image>
					<view class="item_box">
						<view class="data_num">{{collect_num}}</view>
						<view class="data_text">收藏</view>
					</view>
				</view>
				<!-- <view class="data_item" @click="go('ucenter/point')">
					<image class="item_img" :src="mine_h_bg" mode=""></image>
					<view class="item_box">
						<view class="data_num">{{point}}</view>
						<view class="data_text">积分</view>
					</view>
				</view> -->
			</view>
			<view class="vip_box">
				<image class="vip_imgs" :src="mine_vip_1_img" mode=""></image>
				<image class="vip_img_icon" src="/static/mine_vip_icon.png" mode=""></image>
				<view class="vip_boxs_1">
					<view class="boxs_1_title">升级会员 享折扣</view>
					<view class="boxs_1_title2">{{vip_notice}}</view>
					<!-- <view class="vip_load">
						<view class="vip_load_act" style="width: 35%;"></view>
					</view> -->
					<!-- <view class="bottom_text">
						<view class="text_text">双倍积分</view>
						<view class="middle_text">85</view>
						<view class="text_text">折扣</view>
					</view> -->
				</view>
				<!-- <view class="vip_btns">立即开通</view> -->
			</view>
			<view class="menu_box">
				<view class="box_head">
					<view class="head_l">
						<image src="/static/index_title_icon.png" mode=""></image>
						<text>我的订单</text>
					</view>
					<view class="head_r" @click="go('order/list',{ id: 1 })">
						<text>全部订单</text>
						<image src="/static/right.png" mode=""></image>
					</view>
				</view>
				<view class="menu_list">
					<view class="list_item" v-for="(item,index) in menuList1" :key="index" @click="go(item.path)">
						<image :src="item.icon" mode=""></image>
						<view class="texts">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="menu_box">
				<view class="box_head">
					<view class="head_l">
						<image src="/static/index_title_icon.png" mode=""></image>
						<text>工具</text>
					</view>
				</view>
				<view class="menu_list">
					<view class="list_item" v-for="(item,index) in menuList2" :key="index" @click="go(item.path)">
						<image :src="item.icon" mode=""></image>
						<view class="texts">{{item.title}}</view>
					</view>
				</view>
				<view class="menu_list">
					<view class="list_item" v-for="(item,index) in menuList3" :key="index" @click="go(item.path)">
						<image :src="item.icon" mode=""></image>
						<view class="texts">{{item.title}}</view>
					</view>
					<view class="list_item" >
							<view style="background-color: #fff;width: 48px;height: 48px;"></view>
						<view class="texts"></view>
					</view>	
					<view class="list_item" >
							<view style="background-color: #fff;width: 48px;height: 48px;"></view>
						<view class="texts"></view>
					</view>
				</view>
			</view>
			<!-- <view class="foot_gg">
				<image class="img_bg" src="/static/mine_foot_bg.png" mode=""></image>
				<view class="gg_box">
					<view class="text1">推荐有礼</view>
					<view class="text2">1000元红包</view>
					<view class="text3">与好友一起分享</view>
				</view>
			</view> -->
		</view>
		<TabBar :tabBarShow="5"></TabBar>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar/TabBar.vue';
	import config from "@/config";
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				username: '',
				amount: 0.00,
				coupon: 0,
				avatar: "",
				order_count: {},
				point: 0,
				collect_num: 0,
				menuList1:[
					{ icon: '/static/mine_icon_1.png', title: '待付款', path: 'order/list?id=1'},
					{ icon: '/static/mine_icon_2.png', title: '待发货', path: 'order/list?id=2'},
					{ icon: '/static/mine_icon_3.png', title: '待收货', path: 'order/list?id=3'},
					{ icon: '/static/mine_icon_4.png', title: '待归还', path: 'order/list?id=4'},
					{ icon: '/static/mine_icon_5.png', title: '待评价', path: 'order/list?id=5'}
				],
				menuList2:[
					{ icon: '/static/mine_icon_6.png', title: '申请发票', path: 'fapiao/list'},
					{ icon: '/static/mine_icon_7.png', title: '我的钱包', path: 'ucenter/wallet'},
					{ icon: '/static/mine_icon_8.png', title: '收货地址', path: 'ucenter/address'},
					{ icon: '/static/mine_icon_9.png', title: '投诉建议', path: 'ucenter/Complaint'},
				],
				menuList3:[
					{ icon: '/static/swiper_icon_7.png', title: '浏览历史', path: 'ucenter/history'},
					{ icon: '/static/mine_icon_10.png', title: '前往托管', path: 'tuoguan/index'}
			
				],
				city:'',
				vip_notice:'',
				user_level:'',
				mine_vip_1_img:config.uni_app_web_url + 'static/h5/mine_vip_1.png',
				mine_h_bg:config.uni_app_web_url + 'static/h5/mine_h_bg.png',
				statusH:this.$storage.get("statusH")
			}
		},
		onShow() {
		    let users = this.$storage.getJson("users");
			//this.point = users.point;
			console.log('222222',users)
			if(users == null){
				console.log('333333')
				this.$utils.navigateTo('public/login');
			}else{
				this.username = users.nickname || users.username || users.mobile;
				this.amount = users.amount;
				this.coupon = users.coupon_count;
				this.avatar = users.avatar;
				this.$http.getUcenter().then((res)=>{
				    if(res.status){
				        this.username = res.data.nickname || res.data.username || res.data.mobile;
				        this.amount = users.amount = res.data.amount;
				        this.coupon = users.coupon_count = res.data.coupon_count;
				        this.avatar = users.avatar = res.data.avatar;
				        this.order_count = res.data.order_count;
				        this.$store.commit("UPDATEUSERS",users);
				        this.vip_notice = res.data.vip_notice;
				        this.user_level = res.data.group_name;
				    }
				});
			};
			this.collect()
			this.city = this.$storage.getJson("city")
		},
		methods: {
			collect() {
				this.$http.getCollectList().then((result)=>{
					this.collect_num = result.data.list.length
				}).catch(error=>{});
			},
			go(value,param){
			    let params = param || "";
			    if(params == ""){
					this.$utils.navigateTo(value);
			    }else{
					this.$utils.navigateTo(value,params);
			    }
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		// min-height: 100vh;
		// padding: 32rpx 32rpx 200rpx 32rpx;
		padding: 32rpx;
		width: calc(100% - 64rpx);
		background: linear-gradient( 181deg, #BBE0FC 0%, #78C0F9 8%, #ACDCF4 15%, rgba(209,240,241,0.9846) 19%, rgba(209,240,241,0) 100%);
		
		.header{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image:nth-child(1){
				width: 30rpx;
				height: 30rpx;
				//margin-right: 35rpx;
			}
			image:nth-child(2){
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.userinfo{
			/* #ifdef MP */
			margin-top: 20rpx;
			/* #endif */
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user_left{
				display: flex;
				align-items: center;
				image{
					width: 120rpx;
					height: 120rpx;
				}
				.info_text{
					margin-left: 30rpx;
					.name{
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
					}
					.city{
						margin-top: 15rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						text{
							margin-left: 15rpx;
						}
					}
				}
			}
			.user_qd{
				position: relative;
				width: 202rpx;
				height: 72rpx;
				.qd_img{
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
				}
				.qd_box{
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					padding-top: 15rpx;
					justify-content: center;
				}
			}
		}
		
		.data_list{
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.data_item{
				width: 153rpx;
				height: 148rpx;
				background: linear-gradient( 180deg, #DDE7FF 0%, #FFFFFF 30%, #FFFFFF 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				position: relative;
				text-align: center;
				.item_img{
					position: absolute;
					right: 3rpx;
					bottom: 4rpx;
					width: 95rpx;
					height: 81rpx;
					z-index: 1;
				}
				.item_box{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
					.data_num{
						padding-top: 20rpx;
						font-weight: 700;
						font-size: 50rpx;
						color: #3B76FF;
					}
					.data_text{
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}
		}
		
		.vip_box{
			margin-top: 30rpx;
			height: 184rpx;
			position: relative;
			.vip_imgs{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
			.vip_img_icon{
				width: 201rpx;
				height: 140rpx;
				position: absolute;
				right: 16rpx;	
				top: 2rpx;
				z-index: 2;
			}
			.vip_boxs_1{
				position: absolute;
				top: 44rpx;
				left: 38rpx;
				z-index: 3;
				width: calc(100% - 38rpx - 43rpx);
				.boxs_1_title{
					font-weight: 600;
					font-size: 36rpx;
					color: #1C01C0;
				}
				.boxs_1_title2{
					margin-top: 15rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #7200E4;
				}
				.vip_load{
					margin-top: 20rpx;
					height: 14rpx;
					background: rgba(255,255,255,0.4);
					border-radius: 81rpx 81rpx 81rpx 81rpx;
					.vip_load_act{
						height: 14rpx;
						background: rgba(255,255,255,0.6);
						border-radius: 81rpx 81rpx 81rpx 81rpx;
					}
				}
				.bottom_text{
					margin-top: 0rpx;
					display: flex;
					align-items: flex-end;
					color: #6C0E7E;
					.text_text{
						font-weight: 600;
						font-size: 24rpx;
						line-height: 34rpx;
					}
					.middle_text{
						font-weight: 600;
						font-size: 64rpx;
					}
				}
			}
			.vip_btns{
				width: 177rpx;
				height: 56rpx;
				background: rgba(76,0,176,0.4);
				border-radius: 30rpx 0rpx 0rpx 30rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				z-index: 3;
				bottom: 21rpx;
			}
		}
		
		.menu_box{
			padding: 16rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(141,191,252,0.5);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			.box_head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.head_l{
					display: flex;
					align-items: center;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					text{
						font-weight: normal;
						font-size: 32rpx;
						color: #3D3D3D;
						padding-left: 10rpx;
					}
				}
				.head_r{
					display: flex;	
					align-items: center;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						padding-right: 20rpx;
					}
				}
			}
			.menu_list{
				padding: 20rpx 20rpx 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.list_item{
					text-align: center;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					.texts{
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}
		}
		.foot_gg{
			margin-top: 16rpx;
			position: relative;
			height: 195.68rpx;
			width: 100%;
			.img_bg{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			.gg_box{
				position: absolute;
				left: 10rpx;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				text-align: center;
				.text1{
					font-weight: 600;
					font-size: 24rpx;
					color: #DC0000;
					position: absolute;
					width: 100%;
					top: 20rpx;
				}
				.text2{
					font-weight: 600;
					font-size: 64rpx;
					color: #FBFF23;
					text-shadow: 0px 6px 5px #930000;
					position: absolute;
					width: 100%;
					top: 45rpx;
				}
				.text3{
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					position: absolute;
					width: 100%;
					top: 140rpx;
				}
			}
		}
	}
</style>